<template>
	<div>
		<!--引用表格-->
		<BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys"
			@expand="handleExpand" @fetch-success="onFetchSuccess">
			<!--插槽:table标题-->
			<template #tableTitle>
				<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
				<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
				<j-upload-button type="primary" preIcon="ant-design:import-outlined"
					@click="onImportXls">导入</j-upload-button>
				<!-- <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
            >批量操作
            <Icon icon="ant-design:down-outlined"></Icon>
          </a-button>
        </a-dropdown> -->
			</template>
			<!--操作栏-->
			<template #action="{ record }">
				<TableAction :actions="getTableAction(record)" />
			</template>
		</BasicTable>
		<!--字典弹窗-->
		<CategoryModal @register="registerModal" @success="handleSuccess" />
		<CategoryLeaderModal @register="registerLeaderModal" @success="handleSuccess" />
		<CategoryCityModal @register="registerCityModal" @success="handleSuccess" />
	</div>
</template>

<script lang="ts" name="system-category" setup>
	//ts语法
	import { ref, computed, unref, toRaw, nextTick } from 'vue';
	import { BasicTable, useTable, TableAction } from '/src/components/Table';
	import { useDrawer } from '/src/components/Drawer';
	import CategoryModal from './components/CategoryModal.vue';
	import CategoryLeaderModal from './components/CategoryLeaderModal.vue';
	import CategoryCityModal from './components/CategoryCityModal.vue';
	import { useModal } from '/src/components/Modal';
	import { useMethods } from '/src/hooks/system/useMethods';
	import { columns, searchFormSchema } from './category.data';
	import { list, deleteCategory, batchDeleteCategory, getExportUrl, getImportUrl, getChildList, getChildListBatch } from './category.api';
	import { useListPage } from '/@/hooks/system/useListPage';

	const expandedRowKeys = ref([]);
	const { handleExportXls, handleImportXls } = useMethods();
	//字典model
	const [registerModal, { openModal }] = useModal();
	const [registerLeaderModal, { openModal: openLeaderModal }] = useModal();
	const [registerCityModal, { openModal: openCityModal }] = useModal();
	// 列表页面公共参数、方法
	const { prefixCls, onExportXls, onImportXls, tableContext } = useListPage({
		designScope: 'category-template',
		tableProps: {
			title: '分类字典',
			api: list,
			columns: columns,
			actionColumn: {
				width: 180,
			},
			formConfig: {
				schemas: searchFormSchema,
			},
			isTreeTable: true,
		},
		exportConfig: {
			name: '分类字典列表',
			url: getExportUrl,
		},
		importConfig: {
			url: getImportUrl,
		},
	});

	//注册table数据
	const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
		tableContext;

	/**
	 * 新增事件
	 */
	function handleCreate() {
		openModal(true, {
			isUpdate: false,
		});
	}

	/**
	 * 编辑事件
	 */
	async function handleEdit(record) {
		if (record.pid == '1724609796876804098' || record.pid == '1724609720825683970') {
			//领队登陆标记
			openLeaderModal(true, {
				record,
				isUpdate: true,
			});
		} else if (record.pid == '1760922454642933761') {// || record.code.indexOf('A02') > -1

			openCityModal(true, {
				record,
				isUpdate: true,
			});

		} else {
			openModal(true, {
				record,
				isUpdate: true,
			});
		}

	}

	/**
	 * 详情
	 */
	async function handleDetail(record) {

		if (record.pid == '1724609796876804098' || record.pid == '1724609720825683970') {
			//领队登陆标记
			openLeaderModal(true, {
				record,
				isUpdate: true,
			});
		} else if (record.pid == '1760922454642933761') {

			openCityModal(true, {
				record,
				isUpdate: true,
			});

		} else {
			openModal(true, {
				record,
				isUpdate: true,
			});
		}

	}

	/**
	 * 删除事件
	 */
	async function handleDelete(record) {
		await deleteCategory({ id: record.id }, importSuccess);
	}

	/**
	 * 批量删除事件
	 */
	async function batchHandleDelete() {
		const ids = selectedRowKeys.value.filter((item) => !item.includes('loading'));
		await batchDeleteCategory({ ids: ids }, importSuccess);
	}
	/**
	 * 导入
	 */
	function importSuccess() {
		//update-begin---author:wangshuai ---date:20220530  for：[issues/54]树字典，勾选，然后批量删除，系统错误------------
		(selectedRowKeys.value = []) && reload();
		//update-end---author:wangshuai ---date:20220530  for：[issues/54]树字典，勾选，然后批量删除，系统错误--------------
	}
	/**
	 * 添加下级
	 */
	function handleAddSub(record) {
		console.log(record, '------>175')


		if (record.pid == '1724609796876804098') {
			//领队登陆标记
			openLeaderModal(true, {
				record,
				isUpdate: false,
			});
		} else if (record.pid == '1760922454642933761') {// || record.pcode.indexOf("A02") > -1

			openCityModal(true, {
				record,
				isUpdate: false,
			});

		} else {
			openModal(true, {
				record,
				isUpdate: false,
			});
		}

	}
	/**
	 * 成功回调
	 */
	async function handleSuccess({ isUpdate, isSubAdd, values, expandedArr }) {
		if (isUpdate) {
			//编辑回调
			updateTableDataRecord(values.id, values);
		} else {
			if (!values['pid']) {
				//新增根节点
				reload();
			} else {
				//新增子集
				//update-begin-author:liusq---date:20230411--for: [issue/4550]分类字典数据量过多会造成数据查询时间过长--- 
				if (isSubAdd) {
					await expandTreeNode(values.pid);
					//update-end-author:liusq---date:20230411--for: [issue/4550]分类字典数据量过多会造成数据查询时间过长--- 
				} else {
					expandedRowKeys.value = [];
					for (let key of unref(expandedArr)) {
						await expandTreeNode(key);
					}
				}
			}
		}
	}

	/**
	 * 接口请求成功后回调
	 */
	function onFetchSuccess(result) {
		getDataByResult(result.items) && loadDataByExpandedRows();
	}
	/**
	 * 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
	 */
	async function loadDataByExpandedRows() {
		if (unref(expandedRowKeys).length > 0) {
			const res = await getChildListBatch({ parentIds: unref(expandedRowKeys).join(',') });
			if (res.success && res.result.records.length > 0) {
				//已展开的数据批量子节点
				let records = res.result.records;
				const listMap = new Map();
				for (let item of records) {
					let pid = item['pid'];
					if (unref(expandedRowKeys).includes(pid)) {
						let mapList = listMap.get(pid);
						if (mapList == null) {
							mapList = [];
						}
						mapList.push(item);
						listMap.set(pid, mapList);
					}
				}
				let childrenMap = listMap;
				let fn = (list) => {
					if (list) {
						list.forEach((data) => {
							if (unref(expandedRowKeys).includes(data.id)) {
								data.children = getDataByResult(childrenMap.get(data.id));
								fn(data.children);
							}
						});
					}
				};
				fn(getDataSource());
			}
		}
	}
	/**
	 * 处理数据集
	 */
	function getDataByResult(result) {
		if (result && result.length > 0) {
			return result.map((item) => {
				//判断是否标记了带有子节点
				if (item['hasChild'] == '1') {
					let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true };
					item.children = [loadChild];
				}
				return item;
			});
		}
	}
	/**
	 *树节点展开合并
	 * */
	async function handleExpand(expanded, record) {
		// 判断是否是展开状态，展开状态(expanded)并且存在子集(children)并且未加载过(isLoading)的就去查询子节点数据
		if (expanded) {
			expandedRowKeys.value.push(record.id);
			if (record.children.length > 0 && !!record.children[0].isLoading) {
				let result = await getChildList({ pid: record.id });
				if (result && result.length > 0) {
					record.children = getDataByResult(result);
				} else {
					record.children = null;
					record.hasChild = '0';
				}
			}
		} else {
			let keyIndex = expandedRowKeys.value.indexOf(record.id);
			if (keyIndex >= 0) {
				expandedRowKeys.value.splice(keyIndex, 1);
			}
		}
	}
	/**
	 *操作表格后处理树节点展开合并
	 * */
	async function expandTreeNode(key) {
		let record : any = findTableDataRecord(key);
		//update-begin-author:liusq---date:20230411--for: [issue/4550]分类字典数据量过多会造成数据查询时间过长，显示“接口请求超时,请刷新页面重试!”--- 
		if (!expandedRowKeys.value.includes(key)) {
			expandedRowKeys.value.push(key);
		}
		//update-end-author:liusq---date:20230411--for: [issue/4550]分类字典数据量过多会造成数据查询时间过长，显示“接口请求超时,请刷新页面重试!”--- 
		let result = await getChildList({ pid: key });
		if (result && result.length > 0) {
			record.children = getDataByResult(result);
		} else {
			record.children = null;
			record.hasChild = '0';
		}
		updateTableDataRecord(key, record);
	}
	/**
	 * 操作栏
	 */
	function getTableAction(record) {
		return [
			{
				label: '编辑',
				onClick: handleEdit.bind(null, record),
			},
			/* {
				label: '删除',
				popConfirm: {
					title: '确定删除吗?',
					confirm: handleDelete.bind(null, record),
				},
			}, */
			{
				label: '添加下级',
				onClick: handleAddSub.bind(null, { pid: record.id, pcode: record.code }),
				ifShow: (_action) => {
					return record.pid != '1724609796876804098'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
				},
			},
		];
	}
</script>

<style scoped></style>